<template>
    <!-- 修改资料 -->

    <div>
        <!-- 内容主题区域 -->
        <el-form label-width="85px" :model="form" label-position="right" ref="formRef" disabled class="borderNone">
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="编号" prop="number">
                        <el-input v-model="form.number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="上级类别" prop="parentId">
                        <el-input v-model="form.parentName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="级别" prop="itemIndex">
                        <el-input-number v-model="form.itemIndex" :min="0" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="区域" prop="areaType">
                        <el-input v-model="form.areaTypeName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="分类">
                        <el-input v-model="form.customKindName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="附件">
                        <el-image v-if="checkType(form) == 'image'" alt="上传图片" :src="form.fileFullPath"
                            :preview-src-list="srcList" style="width: 40%;"></el-image>
                        <video style="width: 40%;" v-else-if="checkType(form) == 'video'" :src="form.fileFullPath"
                            controls></video>
                        <span v-else>{{ form.fileName }}</span>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="状态" prop="status">
                        <el-switch v-model="form.status" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" active-value="normal" inactive-value="disable" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <div class="button-position">
            <el-button @click="updateVisible" type="primary">退 出</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Check, Close } from '@element-plus/icons-vue';
import Api from '@/api/model/pm'
import { checkType } from '@/utils/checkType.js'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const srcList = ref([])
onMounted(() => {
    getData()

})
const form = ref({});

const updateVisible = (val) => {
    emit('updatetable')
}

//调取数据
const getData = async () => {
    let res = await Api.category.detail.post(props.paramsData);
    console.log(res)
    if (res.code == 200) {
        form.value = res.data;
        srcList.value.push(res.data.fileFullPath)
    } else {
        form.value = '';
    }

}


</script>

<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
    :deep(.el-textarea__inner) {
            box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            cursor: default;
            background-color: transparent; //背景颜色透明
            border-bottom: 1px solid #999;
            border-radius: 0;
        }
}
</style>

